<template>
  <div class="inform-box" @click="closeInform()">
    <div
      class="inform-content"
      :class="{ 'is-active': isClosing }"
      :style="{ backgroundColor: informInfo?.bgcolor }"
      v-if="isShow"
    >
      <div class="inform-icon">
        <img class="inform-icon-img" :src="icon.url" alt="tag" />
      </div>
      <div class="inform-text" :style="{color: informInfo?.color}">{{ informInfo?.content }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { iconMap } from '@renderer/composables/iconUtils'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { useInformStore } from '@renderer/stores/informStore'
import { informTypes } from '@globalTypes/global'

const informStore = useInformStore()
const icon = iconMap['inform']

let isClosing = ref<boolean>(false) // 是否正在关闭
let isShow = ref<boolean>(false) // 是否显示

// 关闭消息动画定时器
let timeout: NodeJS.Timeout | null = null

// 设置提示消息定时器
let timer: NodeJS.Timeout | null = null

// 最后一个展示信息的id删除定时器
let lastInformIdTimeout: NodeJS.Timeout | null = null

// 当前展示的提示信息
const informInfo = ref<informTypes.InformItem | null>(null)

// 最后一个展示的提示信息id,该字段的作用是防止重复展示同一个提示信息
let lastInformId:string = ''

onMounted(() => {
  window.api.mainSyncTimeInformStoreEvent(() => {
    informStore.$hydrate()
  })
  timer = setInterval(() => {
    let current = new Date()
    const hours = current.getHours().toString().padStart(2, '0')
    const minutes = current.getMinutes().toString().padStart(2, '0')
    const timeStr = `${hours}:${minutes}`
    let inform = informStore.getInformByTimeStr(timeStr)
    if (inform) {
      showInform(inform)
    }
  }, 1000)
})

onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer as NodeJS.Timeout)
  }
  timer = null
  if(timeout) {
    clearTimeout(timeout)
  }
  timeout = null
  if(lastInformIdTimeout) {
    clearTimeout(lastInformIdTimeout)
  }
  lastInformIdTimeout = null
})

// 关闭提示框
function closeInform() {
  isClosing.value = true

  timeout = setTimeout(() => {
    isClosing.value = false
    timeout = null
    isShow.value = false
    informInfo.value = null
  }, 500)
}

// 展示提示框
function showInform(inform: informTypes.InformItem) {
  if(lastInformId === inform.id) {
    return
  }
  informInfo.value = inform
  lastInformId = inform.id
  lastInformIdTimeout = setTimeout(() => {
    lastInformId = ''
  }, 1000 * 60)
  isClosing.value = false
  timeout = null
  isShow.value = true
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'Inconicso-Bold';
  src: url('../../assets/font/Inconsolata-Bold-3.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  /* 左移 */
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-1px);
  }

  /* 右移 */
  20%,
  40%,
  60%,
  80% {
    transform: translateX(1px);
  }
}

$opacity: 0.8;
// $text-color: #fff;
// $background-color: rgba(255, 0, 0, 0.6);

$move-distance: -200px;
$transition-duration: 0.5s;

.inform-box {
  width: 100%;
  height: 20px;
  padding: 0 2px;
}

.inform-content {
  width: 100%;
  height: 20px;
  // background-color: $background-color;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(0%, 0%);

  transition:
    transform $transition-duration cubic-bezier(0.4, 0, 0.2, 1),
    opacity calc($transition-duration * 0.8),
    visibility 0s $transition-duration;

  &.is-active {
    transform: translate(-50%, 0%) translateX($move-distance);
    opacity: 0;
    visibility: hidden;
  }

  .inform-icon {
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    .inform-icon-img {
      margin-left: 2px;
      height: 14px;
      width: 14px;
      opacity: $opacity;
      animation: shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
      transform-origin: center center;
      /* 确保旋转基准点居中 */
    }
  }

  .inform-text {
    height: 20px;
    flex: 1;
    font-size: 10px;
    line-height: 20px;
    font-family: 'Inconicso-Bold';
    // color: $text-color;
    opacity: $opacity;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.05em;
    margin-right: 5px;
  }
}
</style>
